<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>
<style type="text/css">
	.box1{
		border: 1px solid;
		padding: 10px;
		width: 500px;
		height: 500px;
		background-color: red;
		/* 如果背景图片小于元素，会自动平铺，如果背景图片大于元素，会有一部分背景无法显示 如果一样大，则正常显示 */
		background-image: url(img/pic1.jpg);
		/* s设置背景重复方式 repeat默认值 repeat-x沿x轴重复 repeat-y沿y轴重复 no-repeat*/
		background-repeat: no-repeat;
		/* 设置背景图片位置 top left right bottom center 或者是水平垂直偏移量*/
		background-position:  0px 0px;
		/* 背景偏移量计算远点 padding-box默认值 content-box border-box*/
		background-origin:content-box ;
		/* 设置背景范围：border-box默认值 padding-box content-box */
		background-clip:content-box ;
		/* 设置背景图片大小 如果只写一个，第二个值默认auto  cover图片比例不变铺满 content图片比例不变完整显示*/
		background-size: 100px auto;
	}
	.box2{
		border: 1px solid;
		padding: 10px;
		width: 500px;
		height: 500px;
		/* 线性渐变 to top/right/bottom/left deg度数 turn转圈*/
		/* 可以指定多个颜色，手动指定渐变分布情况 */
		background-image: linear-gradient(to top ,red 10px, yellow 150px,red);
	}
	.box3{
		border: 1px solid;
		padding: 10px;
		width: 500px;
		height: 700px;
		/* 径向渐变 默认情况下径向渐变形状根据元素形状计算*/
		background-image: radial-gradient(red,yellow);
	}
</style>